<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<img style="width: 100%; height: 300px;" src="../../../public/static/coupon/coupon1.jpeg" alt="">
			</el-col>
		</el-row>
		<el-row style="margin-top: 20px;" :gutter="20">
			<el-col style="text-align: right;line-height: 40px;" :span="6">
				<i class="el-icon-data-line"></i>
			</el-col>
			<el-col style="text-align: right;" :span="6">
				<el-input placeholder="请输入起飞城市或抵达城市查询" v-model="searchCoupon" clearable>
				</el-input>
			</el-col>
			<el-col style="text-align: left;" :span="6">
				<el-button icon="el-icon-search" @click="seachCoupons"> 搜索</el-button>
			</el-col>
		</el-row>
		<el-row style="text-align: center;width: 80%; margin-left: 10%;">
			<el-card style="margin-top: 30px;" shadow="always">
				<el-table :data="searchCoupontableData" height="400" border
					:default-sort="{prop: 'startTime', order: 'descending'}">
					<el-table-column fixed prop="startTime" sortable label="秒杀开始" width="180">
					</el-table-column>
					<el-table-column prop="endTime" sortable label="秒杀结束" width="180">
					</el-table-column>
					<el-table-column prop="startCity" label="起飞城市" width="180">
					</el-table-column>
					<el-table-column prop="endCity" label="抵达城市" width="180">
					</el-table-column>
					<el-table-column prop="fullMoney" sortable label="可使用最低消费额" width="180">
					</el-table-column>
					<el-table-column prop="reduceMoney" sortable label="抵扣金额" width="180">
					</el-table-column>
					<el-table-column prop="des" label="抵用券描述" width="180">
					</el-table-column>
					<el-table-column prop="couponType" label="抵用券类型" width="180">
						<template slot-scope="scope">
							<span v-if="scope.row.couponType == 1">单程</span>
							<span v-if="scope.row.couponType == 2">往返</span>
						</template>
					</el-table-column>
					<el-table-column prop="onlineCount" sortable label="剩余券数量" width="180">
					</el-table-column>
					<el-table-column label="抢购" width="180">
						<template slot-scope="scope">
							<el-link type="success" @click="buyCoupon(scope.row)"><i
									class="el-icon-shopping-cart-1"></i> 立即抢购
							</el-link>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="margin-top: 20px; text-align: right;" background layout="prev, pager, next"
					:total="searchAllCoupontableData.length" :hide-on-single-page="true" @prev-click="prevClick"
					@next-click="nextClick" @current-change="currentChange">
				</el-pagination>
			</el-card>
		</el-row>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "ECheng",
		components: {},
		data() {
			return {
				searchCoupon: "",
				// 显示的数据
				searchCoupontableData: [],
				// 所有的数据
				searchAllCoupontableData: []
			}
		},
		created() {

		},
		mounted() {
			// TODO 抢购之前必须验证是否已经登录，
		},
		methods: {
			seachCoupons() {
				let vm = this
				vm.searchCoupontableData = []
				if (vm.searchCoupon.trim() == '') {
					// 查询所有
					axios({
						url: vm.$dev.BASE_URL + `/coupon-service/coupon/searchAllCouponsLimitTime`,
						method: 'get'
					}).then(function(res) {
						if (res.data.success) {
							vm.searchAllCoupontableData = res.data.data.couponList
							// 分页
							vm.searchCoupontableData = vm.searchAllCoupontableData.slice(0, 10)
							vm.$message.success(res.data.message)
						} else {
							vm.$message.warning(res.data.message)
						}
					})
					return;
				}
				axios({
					url: vm.$dev.BASE_URL + `/coupon-service/coupon/searchAllCouponsByCondition/` + vm.searchCoupon
						.trim(),
					method: 'get'
				}).then(function(res) {
					if (res.data.success) {
						if (res.data.data.couponList[0] == null) {
							vm.$message.warning("暂无查询结果")
							return
						}
						vm.searchAllCoupontableData = res.data.data.couponList
						// 分页
						vm.searchCoupontableData = vm.searchAllCoupontableData.slice(0, 10)
						vm.$message.success(res.data.message)
					} else {
						vm.$message.warning(res.data.message)
					}
				})
			},
			// 分页操作
			// TODO 前端分页
			prevClick(e) {
				this.searchCoupontableData = this.searchAllCoupontableData.slice((e - 1) * 10, e * 10)
			},
			nextClick(e) {
				this.searchCoupontableData = this.searchAllCoupontableData.slice((e - 1) * 10, e * 10)
			},
			currentChange(e) {
				this.searchCoupontableData = this.searchAllCoupontableData.slice((e - 1) * 10, e * 10)
			},
			buyCoupon(row) {
				let vm = this
				// 如果没有登录就提示登录，不可以进行购票
				let nickName = vm.$cookie.get('nickName');
				let id = vm.$cookie.get('id');
				if (typeof(nickName) == "undefined" || nickName == null || typeof(id) == "undefined" || id == null) {
					vm.$message.success("请先登录在领取嗷~")
					return;
				}
				// 如果没有到秒杀的时间，不可以进行
				if (new Date(row.startTime).getTime() >= new Date().getTime()) {
					vm.$message.warning("秒杀尚未开始，不可以抢购~")
					return;
				}
				if (new Date(row.endTime).getTime() <= new Date().getTime()) {
					vm.$message.warning("秒杀已经结束，下次再来~")
					return;
				}
				if (row.onlineCount <= 0) {
					vm.$message.warning("秒杀已经结束，下次再来~")
					return;
				}
				let uniqueKey = row.uniqueKey
				axios({
					method: 'get',
					url: vm.$dev.BASE_URL + '/coupon-service/coupon/insertOneCoupon/' + uniqueKey + "/" + id,
				}).then(function(res) {
					if (res.data.success) {
						vm.$message.success(res.data.message)
						vm.seachCoupons()
					} else {
						vm.$message.warning(res.data.message)
					}
				})
			}
		}
	}
</script>

<style>
</style>
